const { defineConfig } = require('@vue/cli-service')

// 获取项目绝对路径
const path = require('path')
// 定制主题：拼接 theme.less 文件在项目中的绝对路径，__dirname 表示当前文件所处的路径
const themePath = path.join(__dirname, './src/theme.less')

module.exports = defineConfig({
  transpileDependencies: true,

  publicPath: './', // 部署应用包时的基本 URL

  // 定制主题
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量，缺点是每次都要重启服务器，不推荐使用
            // 'text-color': '#111',
            // 'border-color': '#eee',
            // 'nav-bar-background-color': '#007bff',
            // 'nav-bar-title-text-color': '#fff'

            // 定制主题：或者可以通过 less 文件覆盖（文件路径为绝对路径），优点是不用每次都重启服务器
            hack: `true; @import "${themePath}";`
          }
        }
      }
    }
  },

  // 增强 vue-cli 的 webpack 配置项
  configureWebpack: {
    // 打包优化
    externals: {
      // import 时的包名称: window 全局的成员名称
      'highlight.js': 'hljs',
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      vant: 'vant',
      dayjs: 'dayjs',
      'socket.io-client': 'io',
      popmotion: 'popmotion'
    }
  }
})
